<template>
  <div>
    <el-menu 
      class="mymenu"
      background-color="#333333"
      text-color="#cccccc"
      active-text-color="#ffd04b"
      :default-active="actRoute" 
      :router="true">
      <template v-for="m in treeMenuList">
        <subMenu :key="m.id" v-if="m.children.length" :data="m"></subMenu>
        <el-menu-item :index="'/home/'+m.menuENName" :key="m.id" v-else><i v-if="m.icon" class="iconfont" :class="m.icon"></i><span>{{m.menuZHName}}</span></el-menu-item>
      </template> 
    </el-menu>
  </div>
</template>

<script>
import subMenu from 'components/sub-menu'
import {mapState} from 'vuex'
export default {
  components: {
    subMenu
  },
  computed: {
    ...mapState('menu', ['treeMenuList']),
    actRoute(){
      let path = '/home/' + this.$route.name
      // if(path === '')
      return path
    }
  }
}
</script>

<style lang="scss" scoped>
.mymenu{
  height: 100%;
  overflow: auto;
}
</style>
